<template>
  <div
    class="common-pagination"
    v-if="options"
  >
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="options.total"
      :page-size="options.pageSize"
      :page-sizes="options.pageSizes"
      :current-page="options.currentPage"
      :pager-count="options.pagerCount"
      :disabled="options.isDisabled"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'CommonPagination',
  props: {
    options: {
      type: Object,
      required: true
    },
    dataSource: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  methods: {
    // 处理改变当前页
    handleCurrentChange(currentPage) {
      this.options.currentPage = currentPage;
      this.dataSource();
    },
    // 处理改变每页条数
    handleSizeChange(pageSize) {
      this.options.currentPage = 1;
      this.options.pageSize = pageSize;
      this.dataSource();
    }
  }
};
</script>

<style scoped>
.common-pagination {
  width: 100%;
  padding: 20px;
}
.el-pagination {
  text-align: right;
}
.el-pagination .btn-next {
  padding-left: 0 !important;
}
</style>
